<template>
	<div>
		<p class="title">热销推荐</p>
		<ul>
			<router-link
	        tag="li"
	        class="item border-bottom"
	        v-for="item of list"
	        :key="item.id"
	        :to="'/detail/' + item.id"
	      >
			<img class="item-img" :src="item.imgUrl"/>
			<div class="item-info">
				<p class="item-title">{{item.title}}</p>
				<p class="item-desc">{{item.desc}}</p>
				<button class="item-button" type="button">查看详情</button>
			</div>
			</router-link>
		</ul>
	</div>
</template>

<script>
export default{
	name:'HomeRecommend',
	props:{
        list:Array
    }
}	
</script>

<style scoped lang="stylus">
@import '~styles/mixins.styl'
.title
	line-height:.8rem
	background:#f5f5f5
	text-indent:.2rem
	margin-top:.1rem
.item
	display:flex
	overflow:hidden
	height:1.9rem
	border-bottom: 1px solid #e0e0e0;
	padding:.2rem
	.item-img
		height:1.7rem
		width:1.7rem
	.item-info
		flex:1
		padding-left:.2rem
		min-width:0
		.item-title
			line-height:.54rem
			font-size:.32rem
			ellipsis()
		.item-desc
			line-height:.4rem
			color:#ccc
			ellipsis()
		.item-button
			line-height:.44rem
			background:#ff9300
			padding:0 .25rem
			border-radius:.06rem
			margin-top:.16rem
			color:#fff;	
</style>